import React, { useEffect, useState } from "react";
import {
  Breadcrumb,
  Table,
  Tag,
  Space,
  Button,
  Popconfirm,
  message,
  Drawer,
  Form,
  Input,
  Select,
  Tree,
} from "antd";

import {
  getAdminList,
  removeAdminItem,
  addAdminApi,
  editAdminApi,
} from "../../../api/index";

import { ContainerOutlined, PieChartOutlined } from "@ant-design/icons";

export const treeData = [
  {
    title: "系统首页",
    key: "/home/main",
    icon: <PieChartOutlined />,
  },
  {
    title: "轮播图管理",
    key: "2",
    icon: <PieChartOutlined />,
    children: [
      {
        title: "轮播图列表",
        key: "/home/bannerlist",
      },
      {
        title: "添加轮播图",
        key: "/home/banneradd",
      },
    ],
  },
  {
    title: "产品管理",
    key: "3",
    icon: <ContainerOutlined />,
    children: [
      {
        title: "产品列表",
        key: "/home/project",
      },
    ],
  },
  {
    title: "账号管理",
    key: "4",
    icon: <PieChartOutlined />,
    children: [
      {
        title: "用户列表",
        key: "/home/userlist",
      },
      {
        title: "管理员列表",
        key: "/home/useradmin",
      },
    ],
  },
  {
    title: "数据可视化",
    key: "/home/echarts",
    icon: <PieChartOutlined />,
  },
  {
    title: "编辑器",
    key: "6",
    icon: <PieChartOutlined />,
    children: [
      {
        title: "富文本编辑器",
        key: "/home/editor",
      },
      {
        title: "MD编辑器",
        key: "/home/md",
      },
    ],
  },
  {
    title: "文件处理",
    key: "7",
    icon: <PieChartOutlined />,
    children: [
      {
        title: "导出excel",
        key: "/home/export",
      },
      {
        title: "导入excel",
        key: "/home/import",
      },
    ],
  },
  {
    title: "高德地图",
    key: "/home/map",
    icon: <PieChartOutlined />,
  },
];

const Index = () => {
  const [dataSource, setDataSource] = useState([]);
  const [open, setOpen] = useState(false);
  const [checkedKeys, setCheckedKeys] = useState([]);
  const [title, setTitle] = useState("新增管理员");

  const [form] = Form.useForm();

  const columns = [
    {
      title: "管理员账号",
      dataIndex: "adminname",
    },
    {
      title: "角色",
      dataIndex: "role",
      render(text) {
        return text === 1 ? (
          <Tag color="magenta">管理员</Tag>
        ) : (
          <Tag color="green">超级管理员</Tag>
        );
      },
    },
    {
      title: "操作",
      render(text, record) {
        return (
          <Space>
            <Button onClick={() => editOpen(record)}>编辑</Button>

            {/* 删除的二次确认 */}
            <Popconfirm
              title="Delete the task"
              description="Are you sure to delete this task?"
              onConfirm={() => confirm(record)}
              okText="Yes"
              cancelText="No"
            >
              <Button danger type="primary">
                删除
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  const confirm = (record) => {
    removeAdminItem({ adminid: record.adminid }).then((res) => {
      if (res) {
        message.success("删除成功");
        getData();
      }
    });
  };

  useEffect(() => {
    getData();
  }, []);

  const getData = () => {
    getAdminList().then((res) => {
      if (res) {
        setDataSource(res.data);
      }
    });
  };

  // 点新增
  const showDrawer = () => {
    setOpen(true);
    setTitle("新增管理员");
    // 清空表单的内容
    form.resetFields();
  };

  // 点编辑
  const editOpen = (record) => {
    setOpen(true);
    setTitle("编辑管理员");
    form.setFieldsValue({
      adminname: record.adminname,
      password: record.password,
      role: record.role + "",
    });
  };

  const onClose = () => {
    setOpen(false);
  };

  const onFinish = (values) => {
    if (title === "新增管理员") {
      // console.log("Success:", { ...values, checkedKeys: checkedKeys });
      addAdminApi({ ...values, checkedKeys: checkedKeys }).then((res) => {
        if (res) {
          message.success("管理员添加成功");
          setOpen(false);
          getData();
        }
      });
    } else {
      editAdminApi({ ...values, checkedKeys: checkedKeys }).then((res) => {
        if (res) {
          message.success("管理员修改成功");
          setOpen(false);
          getData();
        }
      });
    }
  };

  const onSelect = (selectedKeys, info) => {
    console.log("selected", selectedKeys, info);
  };
  const onCheck = (checkedKeys) => {
    // console.log("onCheck", checkedKeys);
    setCheckedKeys(checkedKeys);
  };

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <Breadcrumb
          style={{ marginBottom: 20 }}
          items={[
            {
              title: "账号管理",
            },
            {
              title: "管理员列表",
            },
          ]}
        />
        <Button type="primary" onClick={showDrawer}>
          新增管理员
        </Button>
      </div>

      <Table dataSource={dataSource} columns={columns} rowKey="_id" />

      <Drawer title={title} placement="right" onClose={onClose} open={open}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          <Form.Item label="账号" name="adminname">
            <Input />
          </Form.Item>

          <Form.Item label="密码" name="password">
            <Input.Password disabled={title === "编辑管理员"} />
          </Form.Item>

          <Form.Item label="权限" name="role">
            <Select
              style={{ width: 120 }}
              options={[
                { value: "2", label: "超级管理员" },
                { value: "1", label: "管理员" },
              ]}
            />
          </Form.Item>

          <Form.Item label="权限">
            <Tree
              checkable
              onSelect={onSelect}
              onCheck={onCheck}
              treeData={treeData}
              defaultExpandAll={true}
              defaultCheckedKeys={[]}
              selectedKeys={[]}
            />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
};

export default Index;
